<template>
  <view class="container">
    <view
      class="indexbg"
      :style="{
        backgroundImage: 'url(' + $util.img('image/sanqi/new_bg.png') + ')',
      }"
      mode="widthFix"
      lazy-load
    ></view>
    <!-- 顶部导航 -->
    <view class="fixHeader flex-y-center" :style="{ paddingTop: StatusBar + 'px' }">
      <view class="leftbtn" @click="goBack()">
        <image :src="$util.img('/image/left.png')" mode="widthFix" style="width: 51rpx"></image>
      </view>
      <!-- <search
        placeholder="搜索商品名称..."
        background="rgba(255, 255, 255, 0.7)"
        width="280"
        page="mall"
        @search="search"
      ></search> -->
    </view>
    <view :style="{ height: StatusBar + 45 + 'px' }"></view>
    <!-- 新增分类导航列表 -->
    <view class="rel">
      <u-tabs
        :list="tabList"
        :current="tabIndex"
        lineWidth="30"
        lineColor="#FF8F33"
        @click="clickTab"
        :activeStyle="{
          color: '#FF8F33',
          fontSize: '36rpx',
          fontWeight: 'bold',
        }"
        :scrollable="false"
        :inactiveStyle="{
          fontSize: '32rpx',
          color: '#788096',
        }"
      >
      </u-tabs>
    </view>

    <view class="rel m-l-24 m-r-24 m-t-24" v-if="tabIndex == 0">
      <search
        placeholder="搜索商品名称..."
        background="rgba(255, 255, 255, 0.7)"
        width="690"
        page="mall"
        @search="search"
      ></search>
    </view>
    <view class="miaoS flex-between rel m-l-24 m-t-20 m-r-24" v-if="tabIndex == 1 && storeList.length > 0">
      <view class="flex-y-center font-24 lls">
        <!-- <text class="iconfont color-title2 m-r-14">&#xe602;</text>
        <text class="m-r-14">{{ scopeText }}</text>
        <u-icon name="arrow-right" size="16" color="#788096"></u-icon>
        <text class="m-l-14" style="color: #bbbec9">|</text> -->
        <view class="search flex flex-y-center m-l-14">
          <i class="iconfont icon-sou">&#xe61f;</i>
          <input
            type="text"
            v-model="keywords"
            placeholder="搜索..."
            placeholder-class="font-26 c-78"
            @confirm="searchMiaoGoods"
            style="width: 280rpx"
          />
        </view>
        <!-- <search
          placeholder="搜索商品名称..."
          background="rgba(255, 255, 255, 0.7)"
          width="340"
          page="mall"
          @search="search"
        ></search> -->
      </view>
      <view class="fill-base radius-34 rel">
        <u-tabs
          :list="deliverList"
          lineWidth="0"
          @click="tabDeliverClick"
          :activeStyle="{
            color: '#fff',
            background: '#FF8F33',
            padding: '6rpx 20rpx',
            borderRadius: '50rpx',
            fontSize: '26rpx',
          }"
          :inactiveStyle="{
            color: '#606882',
            background: '#ffffff',
            padding: '6rpx 20rpx',
            borderRadius: '50rpx',
            fontSize: '26rpx',
          }"
          itemStyle="padding-right: 0;padding-left:0; "
        >
        </u-tabs>
      </view>
    </view>
    <view class="opera rel" v-if="tabIndex == 0">
      <view class="opera-item" v-for="(item, index) in navlist" :key="index" @click="goChildTo(item)">
        <image class="img" :src="$util.img(item.image)" mode="aspectFill" />
        <text class="text">{{ item.category_name }}</text>
      </view>
    </view>

    <block v-if="tabIndex == 0">
      <scroll-view class="scroll-Y" scroll-y @scrolltolower="loadMore">
        <view class="ad m-l-24 m-r-24" v-if="tabIndex == 0">
          <u-swiper
            :list="adlist"
            indicator
            indicatorMode="dot"
            @click="clickItem"
            circular
            keyName="image"
            :height="swiperHeight"
            indicatorActiveColor="#00D075"
            indicatorInactiveColor="#fff"
          ></u-swiper>
        </view>
        <goods page="mall" :goodsList="goodsList"></goods>
        <emptyData
          :width="empty.width"
          :height="empty.height"
          :text="empty.text"
          :icon="empty.icon"
          :marginTop="empty.marginTop"
          v-if="goodsList.length == 0"
        ></emptyData>
      </scroll-view>
    </block>
    <!-- 新增无忧秒送 -->
    <block v-if="tabIndex == 1">
      <view class="miaoContent rel" v-if="storeList.length > 0">
        <view class="store-detail">
          <view class="flex-between">
            <view class="store-info">
              <view class="flex-y-center font-32 text-bold ellipsis" @click="openChooseStore()">
                {{ storeInfo.canteen_name }}
                <u-icon name="arrow-right" color="#1C274C" size="14"></u-icon>
              </view>
              <view class="store-time flex-between">
                <text class="time-tag">{{ storeInfo.open_date }}</text>
                <view class="flex-y-center font-24 c-8d" @click.stop="callPhone(storeInfo.telphone)">
                  <image
                    :src="$util.img('image/erqi/mobile.png')"
                    mode="widthFix"
                    class="m-r-10"
                    style="width: 40rpx"
                  ></image>
                  {{ storeInfo.telphone }}
                </view>
              </view>
            </view>
            <image :src="$util.img(storeInfo.canteen_image)" mode="aspectFill" class="store-image" lazy-load></image>
          </view>
          <view class="store-address" @click.stop="goMap">
            <!-- <view class="flex-y-center m-r-20">
					<u-icon name="map" color="#8D93A5" size="14"></u-icon>
					<text class="distance">距您3.2km</text>
				</view> -->
            <text class="ellipsis" style="display: inline-block">{{ storeInfo.address }}</text>
          </view>
        </view>
        <view class="u-demo-block flex-y-center" @click="goScopeDescription()">
          <text>查看服务范围</text>
          <u-icon name="arrow-right" color="#ff8f33" size="14"></u-icon>
        </view>
        <!-- 商品分类模块 -->
        <view class="scrollContent">
          <scroll-view :scroll-y="true" class="scroll-left">
            <view
              class="left-cate"
              :class="index == cateIndex ? 'active' : ''"
              v-for="(item, index) in cateList"
              :key="index"
              @click="changeCate(item, index)"
            >
              <text>{{ item.category_name }}</text>
            </view>
          </scroll-view>
          <scroll-view
            :scroll-y="true"
            id="myScrollView"
            class="scroll-right"
            :scroll-top="scrollTop"
            @scrolltolower="scrolltolower"
          >
            <view class="right-info">
              <view class="font-26 c-60 m-b-20">{{ cateList[cateIndex].category_name }}</view>
              <view class="goods-list" v-for="(goodsitem, goodsindex) in goodsListMiao" :key="goodsindex">
                <view class="list-image" @click="goFoodDetail(goodsitem)">
                  <image :src="goodsImg(goodsitem.goods_image)" mode="aspectFill" :lazy-load="true"></image>
                </view>
                <view class="list-info">
                  <view class="font-30 text-bold ellipsis" @click="goFoodDetail(goodsitem)">{{
                    goodsitem.goods_name
                  }}</view>
                  <view class="c-8d font-24 m-b-10 ellipsis" @click="goFoodDetail(goodsitem)">{{
                    goodsitem.introduction
                  }}</view>
                  <view class="c-8d font-24" @click="goFoodDetail(goodsitem)">已售:{{ goodsitem.sale_num }}</view>
                  <view class="flex-between">
                    <view class="font-36 text-bold" @click="goFoodDetail(goodsitem)">
                      <text class="font-20">￥</text>
                      {{ goodsitem.price }}
                    </view>
                    <view class="list-gg rel" v-if="goodsitem.goods_spec_format" @click="goFoodDetail(goodsitem)">
                      选规格
                      <u-badge
                        type="warning "
                        max="99"
                        :value="goodsitem.num"
                        bgColor="#fcd188"
                        :absolute="true"
                        :offset="[-10, 0]"
                      ></u-badge>
                    </view>
                    <view class="list-gg-btn" v-else-if="goodsitem.num > 0">
                      <u-icon
                        name="minus-circle"
                        color="#FF8F33"
                        size="20"
                        @click="editCart(goodsitem, goodsindex, 'sub')"
                      ></u-icon>
                      <text>{{ goodsitem.num }}</text>
                      <u-icon
                        name="plus-circle-fill"
                        color="#FF8F33"
                        size="20"
                        @click="editCart(goodsitem, goodsindex, 'add')"
                      ></u-icon>
                    </view>
                    <view class="list-gg-btn" v-else @click.stop="addCart(goodsitem)">
                      <u-icon name="plus-circle-fill" color="#FF8F33" size="20"></u-icon>
                    </view>
                  </view>
                </view>
              </view>
              <emptyData
                :width="empty.width"
                :height="empty.height"
                :text="empty.text"
                :icon="empty.icon"
                :marginTop="empty.marginTop"
                v-if="goodsListMiao.length == 0"
              ></emptyData>
            </view>
          </scroll-view>
        </view>

        <view class="fixfooter" :style="{ zIndex: fixfooterZIndex }">
          <view class="start-price" v-if="parseFloat(storeInfo.start_price) > 0 && deliverIndex == 0"
            >起送价：{{ storeInfo.start_price }}元</view
          >
          <view class="flex-y-center">
            <view class="bag m-t-16" @click="showCart = true">
              <image :src="$util.img('image/bag.png')" mode=""></image>
              <view class="badgebox">
                <u-badge max="99" :value="totalCount" bgColor="#FF2323"></u-badge>
              </view>
            </view>
            <view>
              <view class="font-24 c-8d">共 {{ totalCount }} 件,需支付</view>
              <view class="font-36 text-bold c-origin m-r-4" style="line-height: 1"> ￥{{ totalPrice }} </view>
            </view>
          </view>
          <view class="submit m-t-14" @click="submit()" v-if="storeInfo.status == 1">下单</view>
          <view class="submit m-t-14" v-else style="background: #999">店铺休息</view>
        </view>
      </view>
      <emptyData
        :width="empty.width"
        :height="empty.height"
        :text="empty.text"
        :icon="empty.icon"
        :marginTop="empty.marginTop"
        v-if="storeList.length == 0"
      ></emptyData>
    </block>
    <!-- 新增社区团购板块 -->
    <block v-if="tabIndex == 2">
      <scroll-view class="scroll-Y" scroll-y @scrolltolower="loadMore" style="height: calc(100vh - 320rpx)">
        <tuan-goods :tuanList="tuanList" v-if="tuanList.length > 0"></tuan-goods>
        <emptyData
          :width="empty.width"
          :height="empty.height"
          :text="empty.text"
          :icon="empty.icon"
          :marginTop="empty.marginTop"
          v-if="tuanList.length == 0"
        ></emptyData>
      </scroll-view>
    </block>

    <!-- 悬浮购物车 -->
    <view class="cartBox" @click="$util.redirectTo('/otherpages/mall/cart')" v-if="tabIndex == 0">
      <image :src="$util.img('/image/cart.png')" mode=""></image>
      <u-badge type="warning" max="99" :value="cartNum" bgColor="#FF5040" absolute :offset="offset"></u-badge>
    </view>

    <!-- 登录 -->
    <login-pop ref="loginDialog"></login-pop>
    <!-- 商品购物车组件 -->
    <cartGoods
      :show="showCart"
      type="mall"
      v-if="showCart"
      @close="closeCart"
      :totalPrice="totalPrice"
      :totalCount="totalCount"
      :canteenId="storeInfo.canteen_id"
      @updateCart="getCartCount"
    ></cartGoods>
    <!-- 切换门店选择 -->
    <u-picker
      title="切换门店"
      :show="showChooseStore"
      keyName="canteen_name"
      :columns="columns"
      @confirm="confirmChooseStore"
      @cancel="closeChooseStore"
    ></u-picker>
  </view>
</template>

<script>
import cartGoods from "../../components/cartGoods/cartGoods.vue";
import tuanGoods from "../../components/tuanGoods/tuanGoods.vue";
import goods from "../../components/goods/goods.vue";
import search from "../../components/search/search.vue";
export default {
  components: {
    search,
    goods,
    tuanGoods,
    cartGoods,
  },
  data() {
    return {
      StatusBar: getApp().globalData.StatusBar,
      navlist: [],
      adlist: [],
      keyword: "",
      page: 1,
      goodsList: [],
      empty: {
        width: 135,
        height: 134,
        text: "暂无数据",
        icon: "/image/emptyAddress.png",
        marginTop: 100,
      },
      cartNum: 0, //购物车数量
      offset: [4, 0],
      swiperHeight: 126,
      tabIndex: 0,
      tabList: [
        {
          name: "U优商城",
          show: true,
        },
        // {
        //   name: "到店自提",
        //   show: false,
        // },
        {
          name: "无忧秒送",
          show: false,
        },
        {
          name: "社区团购",
          show: true,
        },
      ],
      deliverIndex: 0,
      deliverList: [
        {
          name: "配送",
        },
        {
          name: "自提",
        },
      ],
      // 团购
      tuanList: [],
      //秒送
      storeInfo: {
        // 店铺信息
        canteen_id: 0,
      },
      cateIndex: 0,
      cateList: [],
      goodsPage: 1,
      goodsListMiao: [],
      //购物车数据
      cartList: [],
      totalCount: 0,
      totalPrice: 0,
      showCart: false,
      scrollTop: 0,
      // 服务范围
      scopeText: "不在配送范围内",
      columns: [],
      storeList: [],
      showChooseStore: false,
      fixfooterZIndex: 99999,
      keywords: "",
    };
  },
  onLoad(options) {
    if (!uni.getStorageSync("token")) this.$refs.loginDialog.open();

    this.tabIndex = options.tabIndex || 0;

    this.getCategory();
    this.getBanner();
    this.getGoodsList();

    if (this.tabIndex == 2) {
      this.getTuanGoodsList();
    }

    // 判断设置尺寸，修改轮播图位不同的高度
    this.swiperHeight = (uni.getSystemInfoSync().windowWidth / 375) * 126;

    uni.getLocation({
      type: "gcj02",
      success: (res) => {
        let obj = uni.getStorageSync("location");
        if (obj) {
          let a = this.$util.getDistance(obj.latitude, obj.longitude, res.latitude, res.longitude);
          if (a > 20) {
            uni.removeStorageSync("store");
          }
        }
        uni.setStorage({
          key: "location",
          data: {
            latitude: res.latitude,
            longitude: res.longitude,
          },
        });
      },
    });

    // if (uni.getStorageSync("location") && uni.getStorageSync("storeMiaoInfo")) {
    //   this.checkedLocationScope();
    // }
  },
  onShow() {
    if (uni.getStorageSync("token")) {
      this.getCartNum();
    }

    this.getStoreList();
  },
  onReachBottom() {
    if (this.tabIndex == 0) {
      this.page++;
      this.getGoodsList();
    }
  },
  methods: {
    // --------------------   秒送模块数据 --------------------------------
    goScopeDescription() {
      uni.navigateTo({
        url: "/otherpages/mall/scopeDescription?id=" + this.storeInfo.canteen_id,
      });
    },
    searchMiaoGoods() {
      this.goodsPage = 1;
      this.getGoodsListMiao();
    },
    confirmChooseStore(item) {
      console.log(item);
      let store_id = item.value[0].canteen_id;
      this.showChooseStore = false;
      this.fixfooterZIndex = 99999; // 确认选择后恢复层级
      this.changeStore(store_id);
    },
    closeChooseStore() {
      this.showChooseStore = false;
      this.fixfooterZIndex = 99999; // 关闭时恢复层级
    },
    changeStore(store_id) {
      this.storeInfo = this.storeList.find((v) => v.canteen_id == store_id);
      uni.setStorageSync("storeMiaoInfo", this.storeInfo);
      this.getStoreCategory();
    },
    openChooseStore() {
      console.log("89898989");
      this.showChooseStore = true;
      this.fixfooterZIndex = 99; // 打开时降低层级
    },
    checkedLocationScope() {
      let location = uni.getStorageSync("location");
      this.$api.sendRequest({
        url: "/canteen/api/ordercreate/verifyArea",
        data: {
          latitude: location.latitude,
          longitude: location.longitude,
          canteen_id: uni.getStorageSync("storeInfo").canteen_id || 0,
        },
        success: (res) => {
          if (res.code == 0) {
            this.scopeText = "配送范围内";
          } else {
            this.scopeText = "不在配送范围内";
          }
        },
      });
    },
    closeLocationScope() {
      this.showLocationScope = false;
    },
    tabDeliverClick(e) {
      // console.log(e);
      this.deliverIndex = e.index;
      if (this.deliverIndex == 0) {
        uni.setStorageSync("delivery", {
          title: "快递发货",
          name: "express",
        });
      } else {
        uni.setStorageSync("delivery", {
          title: "门店自提",
          name: "store",
        });
      }
    },
    submit() {
      // 判断是否登录
      if (!uni.getStorageSync("token")) {
        this.$util.showToast({
          title: "请先登录",
        });
        return false;
      }
      // 判断购物车是否有商品
      if (this.totalCount < 1) {
        this.$util.showToast({
          title: "请选择商品",
        });
        return false;
      }

      // 判断是否满足起送价
      if (this.totalPrice < parseFloat(this.storeInfo.start_price) && this.deliverIndex == 0) {
        this.$util.showToast({
          title: "订单金额不能小于起送价",
        });
        return false;
      }

      // 循环购物车数据，生成新的数组包含sku_price_id和amount
      let cart_ids = [];
      this.cartList.forEach((v, k) => {
        // 循环商品规格价格
        cart_ids.push(v.cart_id);
      });

      uni.setStorage({
        key: "orderFoodCreateData",
        data: {
          cart_ids: cart_ids.toString(),
          canteen_id: this.storeInfo.canteen_id,
        },
        success: () => {
          this.$util.redirectTo("/otherpages/food/submitOrder");
        },
      });
    },
    goFoodDetail(item) {
      this.$util.redirectTo("/otherpages/mall/miaoGoodsDetail?id=" + item.sku_id);
    },
    closeCart() {
      this.showCart = false;
    },
    goodsImg(imgStr) {
      let imgs = imgStr.split(",");
      return imgs[0] ? this.$util.img(imgs[0], { size: "mid" }) : "image/emptyAddress.png";
    },
    changeCate(item, index) {
      this.cateIndex = index;
      this.goodsPage = 1;
      this.getGoodsListMiao();
    },
    editCart(item, index, type) {
      let amount = type == "add" ? item.num + 1 : item.num - 1;
      // 限购判断
      if (item.is_limit && amount > item.max_buy) {
        this.$util.showToast({
          title: "限购" + item.max_buy + "件",
        });
        return false;
      }
      if (amount > 0) {
        this.$api.sendRequest({
          url: "/canteen/api/cart/edit",
          data: {
            cart_id: item.cart_id,
            num: amount,
          },
          success: (res) => {
            if (res.code == 0) {
              // 修改商品列表购物车数量
              this.goodsListMiao[index].num = amount;
              this.getCartCount();
            } else {
              this.$util.showToast({
                title: res.message,
              });
            }
          },
        });
      } else {
        this.deleCart(item, index);
      }
    },
    //加入购物车
    addCart(item) {
      // 判断是否登录
      if (!uni.getStorageSync("token")) {
        this.$util.showToast({
          title: "请先登录",
        });
        return false;
      }
      this.$api.sendRequest({
        url: "/canteen/api/cart/add",
        data: {
          sku_id: item.sku_id,
          num: 1,
          canteen_id: this.storeInfo.canteen_id,
        },
        success: (res) => {
          if (res.code == 0) {
            this.getCartCount();
            this.getCartList();
            this.$util.showToast({
              title: "加入购物车成功",
            });
          } else {
            this.$util.showToast({
              title: res.message,
            });
          }
        },
      });
    },
    //获取购物车数量
    getCartCount() {
      this.$api.sendRequest({
        url: "/canteen/api/cart/money",
        data: {
          canteen_id: this.storeInfo.canteen_id,
        },
        success: (res) => {
          if (res.code == 0) {
            this.totalCount = res.data.count;
            if (parseFloat(res.data.member_price) == 0) {
              this.totalPrice = res.data.price;
            } else {
              this.totalPrice = res.data.member_price;
            }
          }
        },
      });
    },
    //购物车列表
    getCartList() {
      this.$api.sendRequest({
        url: "/canteen/api/cart/goodsLists",
        data: {
          canteen_id: this.storeInfo.canteen_id,
        },
        success: (res) => {
          if (res.code == 0) {
            var arr = res.data;
            this.cartList = arr;
            this.goodsListMiao.forEach((item, index) => {
              item.num = 0;
              item.cart_id = 0;
              arr.forEach((vv) => {
                if (item.sku_id == vv.sku_id) {
                  item.num += vv.num;
                  item.cart_id = vv.cart_id;
                  item.is_limit = vv.is_limit;
                  item.max_buy = vv.max_buy;
                }
              });
            });

            this.$forceUpdate();
          } else {
            this.$util.showToast({
              title: res.message,
            });
          }
        },
      });
    },
    getStoreList() {
      this.$api.sendRequest({
        url: "/api/canteen/page",
        data: {
          page: 1,
          page_size: 20,
          canteen_type: 2,
        },
        success: (res) => {
          if (res.code == 0) {
            if (res.data.list.length > 0) {
              this.storeList = res.data.list;
              this.storeInfo = res.data.list[0];
              uni.setStorageSync("storeMiaoInfo", this.storeInfo);
              this.getStoreCategory();

              // 获取配送范围说明
              this.getDeliverScope();

              // 清空数据
              this.columns = [];
              let storeList = res.data.list;
              let columns = storeList.map((item) => ({
                canteen_name: item.canteen_name,
                canteen_id: item.canteen_id,
              }));
              this.columns.push(columns);
            }
          } else {
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
    getStoreCategory() {
      this.$api.sendRequest({
        url: "/canteen/api/goodscategory/tree",
        data: {
          canteen_id: this.storeInfo.canteen_id,
        },
        success: (res) => {
          if (res.code == 0) {
            this.cateList = res.data;
            this.getGoodsListMiao();
          } else {
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
    getGoodsListMiao() {
      this.$api.sendRequest({
        url: "/canteen/api/goodssku/page",
        data: {
          page: this.goodsPage,
          canteen_id: this.storeInfo.canteen_id,
          category_id: this.cateList[this.cateIndex].category_id,
          keyword: this.keywords,
        },
        success: (res) => {
          if (res.code == 0) {
            if (this.goodsPage == 1) this.goodsListMiao = [];
            this.goodsListMiao = this.goodsListMiao.concat(res.data.list);

            if (uni.getStorageSync("token")) {
              this.getCartList();
              this.getCartCount();
            }
          } else {
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
    scrolltolower() {
      this.goodsPage++;
      this.getGoodsListMiao();
    },
    goMap() {
      // 在地图显示该位置导航
      uni.openLocation({
        latitude: Number(this.storeInfo.latitude),
        longitude: Number(this.storeInfo.longitude),
        name: this.storeInfo.canteen_name,
        address: this.storeInfo.full_address + this.storeInfo.address,
      });
    },
    callPhone(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
      });
    },
    //  --------------------   秒送模块数据 end --------------------------------
    clickTab(e) {
      this.tabIndex = e.index;
      this.page = 1;
      if (e.index == 0) {
        this.getGoodsList();
      } else if (e.index == 2) {
        this.getTuanGoodsList();
      } else {
      }
    },
    getCartNum() {
      this.$api.sendRequest({
        url: "/api/cart/count",
        data: {},
        success: (res) => {
          if (res.code == 0) {
            this.cartNum = res.data;
          }
        },
      });
    },
    goChildTo(item) {
      this.$util.redirectTo("/otherpages/mall/list?title=" + item.category_name + "&category_id=" + item.category_id);
    },
    search() {
      this.$util.redirectTo("/otherpages/mall/search");
    },
    goBack() {
      // 判断路由是否有上一页，如果有则返回上一页，否则返回到首页
      if (getCurrentPages().length > 1) {
        uni.navigateBack();
      } else {
        this.$util.redirectTo("/pages/index/index");
      }
    },
    getCategory() {
      this.$api.sendRequest({
        url: "/api/goodscategory/tree",
        data: {},
        success: (res) => {
          if (res.code == 0) {
            this.navlist = res.data;
          }
        },
      });
    },
    clickItem(index) {
      let skip_type = this.adlist[index].skip_type; // 0 文章，1 跳转
      if (skip_type == 0) {
        if (!this.adlist[index].content) return;
        uni.setStorageSync("bannerDetail", {
          content: this.adlist[index].content,
          title: this.adlist[index].banner_title,
        });
        this.$util.redirectTo("/pages/bannerDetail/bannerDetail");
      } else {
        let link = this.adlist[index].banner_url;
        // console.log(link)
        if (link == null || link == "" || (!link.wap_url && !link.appid)) return;
        if (link.appid) {
          uni.navigateToMiniProgram({
            appId: link.appid,
            path: link.page,
          });
        } else {
          this.$util.redirectTo(link.wap_url);
        }
      }
    },
    getBanner() {
      this.$api.sendRequest({
        url: "/api/banner/lists",
        data: {
          type: "1",
        },
        success: (res) => {
          if (res.code == 0) {
            var adlist = res.data;

            adlist.forEach((item) => {
              item.image = this.$config.imgDomain + item.image;
              if (item.banner_url) {
                item.banner_url = JSON.parse(item.banner_url);
              }
            });
            this.adlist = adlist;
          }
        },
      });
    },
    getGoodsList() {
      this.$api.sendRequest({
        url: "/api/goodssku/page",
        data: {
          page: this.page,
          category_id: 0,
          keyword: this.keyword,
        },
        success: (res) => {
          if (res.code == 0) {
            if (this.page == 1) this.goodsList = [];
            this.goodsList = [...this.goodsList, ...res.data.list];
          }
        },
      });
    },
    loadMore() {
      this.page++;
      this.getGoodsList();
    },
    getTuanGoodsList() {
      this.$api.sendRequest({
        url: "/pintuan/api/goods/page",
        data: {
          page: this.page,
        },
        success: (res) => {
          if (res.code == 0) {
            if (this.page == 1) this.tuanList = [];
            this.tuanList = [...this.tuanList, ...res.data.list];

            this.tuanList.forEach((item) => {
              if (item.goods_image) {
                // 判断里面是否有逗号，如果有就分割成数组
                if (item.goods_image.indexOf(",") != -1) item.goods_image = item.goods_image.split(",");
                else item.goods_image = [item.goods_image];
              } else item.goods_image = [];
            });
          } else {
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
  },
  onShareAppMessage() {
    return {
      title: "康养优选",
      path: "",
    };
  },
  onShareTimeline() {
    return {
      title: "康养优选",
      path: "",
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 0;
  height: 100vh;
}
.scroll-Y {
  height: calc(100vh - 540rpx);
}
.indexbg {
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 348rpx;
  position: absolute;
}
.fixHeader {
  position: fixed;
  top: 0;
  z-index: 9;
  width: 100%;
  box-sizing: border-box;
  .leftbtn {
    padding-left: 30rpx;
    margin-right: 30rpx;
    width: 60rpx;
    height: 60rpx;
  }
}
.opera {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 20rpx;
  margin: 24rpx 24rpx 24rpx;
  padding-bottom: 26rpx;
  .opera-item {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 26rpx;
    .img {
      width: 84rpx;
      height: 64rpx;
    }
    .text {
      font-size: 26rpx;
      margin-top: 10rpx;
      color: #172140;
    }
  }
}

.cartBox {
  position: fixed;
  bottom: 20%;
  right: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 108rpx;
  height: 108rpx;
  border-radius: 78rpx;
  background: #fff;
  z-index: 9;
  image {
    width: 88rpx;
    height: 88rpx;
  }
}

// 新增无语秒送
.miaoS {
  .search {
    .icon-sou {
      color: $color-title2;
      font-size: 40rpx;
      margin-right: 10rpx;
    }
  }
  .lls {
    background-color: #fff;
    border-radius: 40rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
  }
}

.miaoContent {
  .store-detail {
    padding: 24rpx 24rpx 0;

    .store-image {
      width: 146rpx;
      height: 146rpx;
      border-radius: 14rpx;
    }

    .store-info {
      width: 68%;
      margin-right: 20rpx;

      .store-time {
        // margin-bottom: 10rpx;
        margin-top: 10rpx;

        .time-tag {
          display: inline-block;
          padding: 4rpx 12rpx;
          border-radius: 4rpx;
          font-size: 20rpx;
          color: #fff;
          background: $color-title2;
          border-radius: 10rpx;
        }
      }

      .store-tags {
        display: flex;
        align-items: center;
        margin-bottom: 14rpx;

        .discount-tag {
          display: flex;
          align-items: center;
          font-size: 20rpx;
          color: #ff5040;
          border: 1px solid #ff5040;
          margin-right: 20rpx;
          border-radius: 10rpx;
          padding-right: 10rpx;

          .discount-icon {
            display: inline-block;
            width: 32rpx;
            text-align: center;
            background: #ff5040;
            color: #fff;
            border-radius: 10rpx;
            margin-right: 10rpx;
          }
        }

        .price-tag {
          font-size: 20rpx;
          color: #ff5040;
          border-radius: 10rpx;
          background: #fff0ef;
          padding: 0 10rpx;

          .separator {
            margin: 0 8rpx;
            color: #ff5040;
          }
        }
      }
    }

    .store-address {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #898fa3;
      margin-bottom: 16rpx;

      .distance {
        color: #8d93a5;
        margin-left: 4rpx;
      }
      .store-daohang {
        width: 22rpx;
        height: 22rpx;
        margin-right: 10rpx;
      }
    }
  }

  .store-active {
    width: 100%;
    height: 212rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .scrollContent {
    display: flex;
    height: calc(100vh - 820rpx);
    background: #fff;

    .scroll-left {
      width: 170rpx;
      margin-right: 20rpx;
      background-color: #f8f9fa;

      .left-cate {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #606882;
        font-size: 26rpx;
        padding: 20rpx 0;

        image {
          width: 75rpx;
          height: 75rpx;
          margin-bottom: 10rpx;
        }
      }

      .active {
        color: #1c274c;
        font-weight: bold;
        background-color: #fff !important;
      }
    }

    .scroll-right {
      width: calc(100% - 190rpx);
      padding: 30rpx 0;

      .goods-list {
        display: flex;
        align-items: center;
        padding-right: 30rpx;
        margin-bottom: 30rpx;

        .list-info {
          width: 60%;
        }

        .list-image {
          position: relative;
          width: 197rpx;
          height: 197rpx;
          border-radius: 20rpx;
          margin-right: 10rpx;
          image {
            width: 100%;
            height: 100%;
          }
          .label {
            position: absolute;
            top: 14rpx;
            left: 22rpx;
            width: 59rpx;
            height: 35rpx;
            line-height: 35rpx;
            text-align: center;
            border-radius: 10rpx;
            background-color: $color-title2;
            color: #fff;
            font-size: 20rpx;
          }
        }

        .list-gg {
          width: 85rpx;
          height: 43rpx;
          line-height: 43rpx;
          text-align: center;
          background-color: $color-title2;
          color: #fff;
          font-size: 22rpx;
          border-radius: 20rpx;
        }

        .list-gg-btn {
          display: flex;
          align-items: center;
          font-weight: 500;
          color: #1c274c;
          text {
            display: inline-block;
            width: 40rpx;
            text-align: center;
          }
        }
      }
    }
  }

  .fixfooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    height: 142rpx;
    z-index: 99999;
    height: calc(142rpx + env(safe-area-inset-bottom) / 2);
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
    box-sizing: border-box;
    .bag {
      position: relative;
      margin-right: 40rpx;
      image {
        width: 56rpx;
        height: 65rpx;
      }
      .badgebox {
        position: absolute;
        top: -12rpx;
        right: -10rpx;
      }
    }
    .submit {
      width: 265rpx;
      height: 86rpx;
      line-height: 86rpx;
      text-align: center;
      background-color: $color-title2;
      color: #fff;
      border-radius: 60rpx;
    }
    .dis {
      background-color: #cfd0d4 !important;
    }
  }

  .health {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0 24rpx 24rpx;
    .healthItem {
      width: 160rpx;
      height: 194rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      border-radius: 20rpx;
      image {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }
}
.u-demo-block {
  height: 86rpx;
  background: #fdf6ec;
  color: $color-title2;
  padding: 0 24rpx;
  justify-content: space-between;
}
.start-price {
  position: absolute;
  top: -3rpx;
  left: 132rpx;
  font-size: 24rpx;
  color: $color-title2;
  font-weight: bold;
}
</style>
